// var bus = Vue.observable({
//     rules: false
// });

//首页
var Page01 = {
    template: `<div class="base baseIndex">
                <img src="images/logo.png"  class="logoImg"/>
                <img src="images/hdTitle.png"  class="hdtitleImg"/>
                <div class="btnFix">
                    <span class="rulebtn" @click="showRule=true">活动规则</span>
                    <img src="images/onceAnswerbtn.png" class="onceAnswerbtn" title="立即答题" @click="answer"/>
                </div>
                <div class="ballFix">
                    <img src="images/icon_ball.png"  class="ballImg"/>
                    <div class="btnItems">
                        <a @click="myprize">
                            <img src="images/icon-gift.png" />
                            <span>我的<br/>奖品</span>
                        </a>
                        <a @click="draw">
                            <img src="images/icon_draw.png" />
                            <span>大转盘<br/>抽奖</span>
                        </a>
                    </div>
                </div>
                
                <van-popup v-model="showRule" :style="{ width: '100%',background:'none',padding:'20px 0'}">
                    <div class="ruleMain">
                        <img src="images/icon_ruleclose.png" class="closeRule" @click="showRule=false"/>
                        <div class="ruleContent">
                            <p>活动规则</p>
                            <div>
                                <span>1.活动期间，每人每天答题机会不限；首次得分≥20即可获得一次大转盘抽奖机会，100%中奖，奖品数量有限，先到先得；</span>
                                <span>2.参与大转盘抽奖需要绑定手机号，绑定的号码需跟手机银行注册手机号保持一致；</span>
                                <span>3. 大转盘奖品：微信立减金（用户手动领取到微信卡包）、手机银行话费券（活动结束后3-5个工作日内统一发放，非河南省手机银行用户无法发放）、礼豫商城优惠券（直接发放到个人中心绑定手机号的礼豫商城账户）具体使用规则，以礼豫商城优惠券详情页显示为准；</span>
                                <span>4. 如有疑问请添加客服微信：13027770360，工作时间：9:00-12:00，14:00-18:00（周一至周五）。</span>
                            </div>
                        </div>
                    </div>
                </van-popup>
            </div>`,
    data: function() {
        return {
            showRule: false
        }
    },

    mounted() {
        this.$nextTick(function() {})
    },

    beforeDestroy() {

    },
    methods: {
        // 我的奖品
        myprize() {
                this.$router.push({
                    path: '/page03'
                });
            },
            // 大转盘抽奖
            draw() {
                this.$router.push({
                    path: '/page04'
                });
            },
            // 立即答题
            answer() {
                this.$router.push({
                    path: '/page02'
                });
            },
    }
};
// 02  答题
var Page02 = {
    template: `
        <div class="base game">
                <div class="top">
                    <div class="miao">
                        <img src="./images/miao.png">
                        <span>{{time}}</span>
                    </div>
                    <div class="fen">
                        <img src="./images/fen.png">
                        <span>{{score}}</span>
                    </div>
                </div>
                <div class="area" v-if="list[currentIndex]">
                    <div class="q">
                        <div class="value"><span class="num">1.</span>{{list[currentIndex]['title']}}</div>
                        <div class="thumb">
                            <img src="https://iph.href.lu/200x100" >
                        </div>
                    </div>
                    <div class="answers">
                        <div class="item" v-for="(item,index) in list[currentIndex]['select']" @click="chooseAnswer(index,item.answer)" 
                        :class="{
                            choose:index==choose,
                            active:(choose!=-1&&item.answer),
                            deactive:(choose==index&&!item.answer)
                        }">
                            <span class="name">{{sy[index]}}</span>
                            <span class="value">{{item['title']}}</span>
                        </div>
                    </div>
                </div>
                <van-popup v-model="showlayerResultEnd" class="layer-result-end">
                    <img src="./images/layer-result-end.png" class="layer-bg">
                    <div class="content">
                        <div style="height:5vw" v-if="score<prizeScore"></div>
                        <div class="score">
                            <div class="value">
                                <span>{{score}}</span>
                                <span>分</span>
                            </div>
                        </div>
                        <p class="tips" v-if="score>=prizeScore">本次答题共获得</p>
                        <div class="chance" v-if="score>=prizeScore">
                            <img src="./images/cover01.png">
                            <p>获得<span>1</span>次大转盘抽奖机会</p>
                            <img src="./images/cover01.png">
                        </div>
                        <div style="height:20vw" v-if="score<prizeScore"></div>
                        <img src="./images/btn-mscj.png" class="btn"  v-if="score>=prizeScore" @click="$router.push({path: '/page04'});">
                        <img src="./images/btn-cxdt.png" class="btn"  v-else @click="reGame">
                        <img src="./images/btn-back.png" class="btn" style="padding: 0px 3%;width: 84%;" @click="$router.push({path: '/page01'});">
                    </div>
                </van-popup>
            </div>
            `,
    data: function() {
        return {
            sy: ["A", "B", "C", "D", "E", "F"],
            choose: -1,
            currentRight: 1,
            showlayerResultEnd: false,
            time: 60,
            timer: null,
            score: 0,
            list: [],
            currentIndex: 0,
            prizeScore: 50
        }
    },
    mounted() {
        this.getQuestion();
        this.timerStart();
    },
    methods: {
        reGame(){
            this.timer=null;
            this.time=60;
            this.currentIndex=0;
            this.choose==-1;
            this.score=0;
        },
        getQuestion() {
                let _this = this;
                $.ajax({
                    type: 'GET',
                    data: {},
                    url: "./json/Question.json",
                    dataType: 'json',
                    success: function(data) {
                        console.log(data)
                        _this.list = data.Questions;
                        // 倒计时结束
                    }

                });
            },
            chooseAnswer(index, tOrf) {
                if (this.choose != -1) return false;
                this.choose = index;
                if (tOrf) {
                    this.score += 5
                }else{
                    this.score -= 2
                };
                setTimeout(() => {
                    this.choose = -1;
                    if (this.currentIndex < this.list.length - 1) {
                        this.currentIndex++;
                    }
                }, 800);
            },
            timerStart() {
                this.timer = setInterval(() => {
                    if (this.time > 1) {
                        this.time--;
                    } else {
                        this.showlayerResultEnd = true;
                        clearInterval(this.timer);
                    }
                }, 1000)
            },
    }
}

// 03 我的奖品
var Page03 = {
    template: `<div class="base baseRecord">
				<div class="recordItem">
					<div class="itemLeft"><b>100</b><em>元</em></div>
					<div class="itemRight">
						<div class="itemtilte">
							<span class="titleName">礼遇商城100元代金券</span>
							<span class="getPoupbtn" @click="getpoupon" v-if="true">领取</span>
                            <span class="getPoupbtn hasget"  v-else>领取</span>
						</div>
						<div class="itemDesc">
							直接发放到官微个人中心绑定手机号注册的 手机银行礼豫商城账户里，自领取之日起， 7天有效，请抓紧使用。
						</div>
					</div>
				</div>
				
				<!-- 领取弹层 -->
				<van-popup v-model="showPoupon" :style="{ width: '100%',background:'none',padding:'20px 0'}">
					<div class="ruleMain">
						<img src="images/icon_ruleclose.png" class="closeRule" @click="showPoupon=false"/>
						<div class="ruleContent">
							<p>请选择银行卡</p>
							<div>
								<van-radio-group v-model="selectBank">
									<div class="chekcItem">
										<van-radio name="1" checked-color="#fe3f3b">中国银行借记卡</van-radio>
									</div>
									<div class="chekcItem">
										<van-radio name="2" checked-color="#fe3f3b">中国银行借记卡</van-radio>
									</div>
								  
								</van-radio-group>
								
								<div class="surbtn" @click="selectFun">确定</div>
							</div>
						</div>
					</div>
				</van-popup>
			</div>`,
    data: function() {
        return {
            showPoupon:false,
			selectBank:0
        }
    },
    mounted() {

    },
    methods: {
        getpoupon(){
            console.log('00')
			this.showPoupon=true
		},
		selectFun(){
			vant.Toast('选择')
			this.showPoupon=false
		}
    }
}

// 04 转盘抽奖
var Page04 = {
    template: `<div class="main">
                <img src="images/page04_bg01.jpg" class="page04_bg01">
                <img src="images/page04_bg02.png" class="page04_bg02">
                <div>
                    <img src="images/page04_title.png" class="page04_title">
                    <div class="Rotary_bgdiv">
                        <img src="images/Rotary_zz.png" class="Rotary_zz" @click="Rotary()" />
                        <div class="Rotary_bg" id="rotate">
                            <img src="images/Rotary_bg.png">
                        </div>
                        <img src="images/Rotary_bt.png" class="Rotary_bt">
                    </div>
                </div>
                <div class="Rotary_btn" @click="viewMyprize">
                    <img src="images/page04_btn.png">
                </div>

           <!-- 未绑定提示弹层-->
            <van-popup v-model="layerBind" class="popup_Rotary" style=" overflow-y: inherit;" :close-on-click-overlay=false>
                <div>
                    <i class="popup_close" @click="layerBind=false"></i>
                   
                    <div class="layer-text01">
                      <div>很遗憾<br>您还未在个人中心<br>绑定手机号</div>
                    </div>
                    <div class="popup_btn">
                        <span>立即去绑定</span>
                        <span class="bor">放弃奖励</span>
                    </div>
                </div>
            </van-popup>

          <!-- 中奖弹层-->
            <van-popup v-model="layerZj" class="popup_Rotary" style=" overflow-y: inherit;" :close-on-click-overlay=false>
                <div>
                    <i class="popup_close" @click="layerZj=false"></i>
                   
                    <div class="layer-text01">
                      <div>恭喜您获得<br><b>{{layerZjtext}}<b></div>
                    </div>
                    <div class="popup_btn">
                        <span @click="viewMyprize">立即查看</span>
                    </div>
                </div>
            </van-popup>


          <!-- 未中奖弹层 活动太火爆，奖品已发完-->
            <van-popup v-model="layernoZj" class="popup_Rotary" style=" overflow-y: inherit;" :close-on-click-overlay=false>
                <div>
                    <i class="popup_close" @click="layernoZj=false"></i>
                   
                    <div class="layer-text01">
                      <div>活动太火爆，奖品已发完</div>
                    </div>
                    <div class="popup_btn">
                        <span @click="layernoZj=false">关闭</span>
                    </div>
                </div>
            </van-popup>

    <!-- 很遗憾您还没有抽奖机会弹层-->
            <van-popup v-model="layernoChance" class="popup_Rotary" style=" overflow-y: inherit;" :close-on-click-overlay=false>
                <div>
                    <i class="popup_close" @click="layernoChance=false"></i>
                   
                    <div class="layer-text01">
                      <div>很遗憾您还没有抽奖机会</div>
                    </div>
                    <div class="popup_btn">
                        <span @click="ToAnswer">去答题</span>
                    </div>
                </div>
            </van-popup>

  <!-- 很遗憾您还没有抽奖机会弹层-->
            <van-popup v-model="layerHave" class="popup_Rotary" style=" overflow-y: inherit;" :close-on-click-overlay=false>
                <div>
                    <i class="popup_close" @click="layerHave=false"></i>
                   
                    <div class="layer-text01">
                      <div>很遗憾您已参与过抽奖</div>
                    </div>
                    <div class="popup_btn">
                        <span @click="viewMyprize">查看奖品</span>
                    </div>
                </div>
            </van-popup>

            </div>`,
    data: function() {
        return {
            angleArry: [0, 60, 120, 180, 240, 300],
            layerBind: false, //绑定弹出 
            layerZj: false, //中奖弹出你
            layerZjtext: "",
            layernoZj: false, //未中奖弹层  活动太火爆，奖品已发完
            layernoChance: false, //没有抽奖机会
            layerHave: false,
        }
    },
    mounted() {

    },
    methods: {

        // 查看我的奖品
        viewMyprize() {
                this.$router.push({
                    path: '/page03'
                });
            },
            //去答题
            ToAnswer() {
                this.$router.push({
                    path: '/page01'
                });
            },
            //转盘
            rotateFn: function(angles) {
                //   var bRotate = false;
                // var time = new Date().getHours();

                $('#rotate').stopRotate();
                $('#rotate').rotate({
                    angle: 0,
                    animateTo: angles + 1800,
                    duration: 4000,
                    callback: function() {
                        this.bRotate = !this.bRotate
                    }
                })
            },

            // 点击抽奖
            Rotary: function() {
                //  $("body").scrollTop(0);
                console.log(this.bRotate)

                // if (this.bRotate) {
                //     this.layerNochance = true
                //     return;
                // }
                if (this.cjnum <= 0) {
                    this.layerNochance = true
                    return;
                };

                this.cjnum--;
                var _this = this;
                $.ajax({
                    type: 'GET',
                    data: {

                    },
                    url: "./json/Winprize.json",
                    dataType: 'json',
                    success: function(data) {
                        console.log(data)
                        console
                        console.log(data.params)
                        var angleRote;
                        if (data.params == 0) { // 15元 礼豫商城优惠券
                            angleRote = _this.angleArry[0]
                        } else if (data.params == 1) { //8元手机银行话费券
                            angleRote = _this.angleArry[1]
                        } else if (data.params == 2) { //1元微信立减金
                            angleRote = _this.angleArry[2]
                        } else if (data.params == 3) { //50元手机银行话费券
                            angleRote = _this.angleArry[3]
                        } else if (data.params == 4) { // 2元微信立减金
                            angleRote = _this.angleArry[4]
                        } else if (data.params == 5) { // 100元手机银行话费券
                            angleRote = _this.angleArry[5] //100元手机银行话费券 
                        }

                        _this.rotateFn(angleRote);
                        setTimeout(function() {
                            if (data.params == -1) {
                                _this.layerNoZj = true;
                                return;
                            }
                            _this.layerZjtext = data.prize;
                            _this.layerZj = true;

                        }, 4000)
                    }
                });

            },

    }
}


var routes = [{
        path: '/page01',
        component: Page01
    }, {
        path: '/page02',
        component: Page02
    }, {
        path: '/page03',
        component: Page03
    }, {
        path: '/page04',
        component: Page04
    },
    //重定向
    {
        path: '*',
        redirect: '/page04'
    }
]

var router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})



var vm = new Vue({
    el: '#app',
    template: "#temp",
    router: router,
    data: {
        pauseType: false,
        showRule: true
    },
    mounted() {
        // if (window.history && window.history.pushState) {
        //     history.pushState(null, null, document.URL);
        //     console.log(document.URL)
        //     window.addEventListener('popstate', this.goBack, false);
        // }
        // if (location.hash == "#/page03" || location.hash == "#/page02") {
        //     history.pushState(null, null, document.URL);
        //     window.addEventListener('popstate', this.goBack, false);
        //     this.layerRules = false
        // }

    },


    methods: {
        goBack() {
                this.$router.replace({
                    path: '/page01'
                });
                //replace替换原路由，作用是避免回退死循环
            },
            tapPause: function() {
                var audio = document.getElementById("music_bg");
                //  console.log(audio.paused)
                if (this.pauseType == false) {
                    audio.pause();
                    this.pauseType = true
                } else {
                    audio.play();
                    this.pauseType = false
                }

            },
    },

    created: function() {
        this.$router.replace('/page03');
    },
    watch: {
        '$route' (to, from) {
            console.log(to.path, from.path);
            if (to.path == "/page01") {
                // console.log( document.getElementById("sound"))
                // document.getElementById("sound").muted = false
                this.layerRules = false
            }
        }
    },

})
